<template>
  <div>
    <basic-container>
      <avue-crud
        :option="option"
        :table-loading="loading"
        :data="data"
        ref="crud"
        v-model="form"
        :page="page"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @on-load="onLoad"
      >
        <template slot="user" slot-scope="scope">
          <span>{{ scope.row.user.realName }}</span>
        </template>
        <template slot="userProjectGauge" slot-scope="scope">
          <span>{{ scope.row.userProjectGauge.projectName }}</span>
        </template>
        <template slot="tradeState" slot-scope="{ row }">
          {{ row.tradeState === "SUCCESS" ? "支付成功" : "未支付" }}
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import { getOrderList } from "@/api/order/index";
export default {
  data() {
    return {
      form: {
        address: [],
      },
      selectionList: [],
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      data: [],
      option: {
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        addBtn: false,
        menu: false,
        column: [
          {
            label: "订单号",
            prop: "wxOrderId",
            overHidden: true,
          },
          {
            label: "用户名",
            prop: "user",
            slot: true,
            search: true,
          },
          {
            label: "测评项目",
            prop: "userProjectGauge",
            slot: true,
          },
          {
            label: "测评项目",
            prop: "projectId",
            search: true,
            hide: true,
            type: "select",
            dicUrl: `/api/blade-measure/measure/userpersonalsummary/project`,
            props: {
              label: "projectName",
              value: "projectId",
            },
          },
          {
            label: "支付时间",
            prop: "tradeTime",
            search: true,
            type: "month",
            format: "yyyy-MM",
            valueFormat: "yyyy-MM",
          },
          {
            label: "支付状态",
            prop: "tradeState",
            slot: true,
            search: true,
            type: "select",
            dicData: [
              {
                label: "支付成功",
                value: "SUCCESS",
              },
              {
                label: "未支付",
                value: "NOTPAY",
              },
              // {
              //   label: "已关闭",
              //   value: "CLOSED",
              // },
            ],
          },
        ],
      },
      tenantId: "",
    };
  },
  created() {
    const userInfo = JSON.parse(localStorage.getItem("saber-userInfo")).content;
    this.tenantId = userInfo.tenantId;
  },
  methods: {
    onLoad(page, params = {}) {
      this.loading = true;
      const tenantId = JSON.parse(localStorage.getItem("saber-userInfo"))
        .content.tenantId;
      getOrderList(
        tenantId === "000000" ? "" : tenantId,
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        this.data = res.data.data.records;
        this.loading = false;
      });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    getStorageTenantId() {
      const tenantId = JSON.parse(localStorage.getItem("saber-userInfo"))
        .content.tenantId;
      return tenantId == "000000" ? "" : `&tenantId=${tenantId}`;
    },
  },
};
</script>

<style scoped lang="scss"></style>
